<template>
  <div class="chart-container">
    <div class="date-input-container">
      <el-date-picker
          v-model="selectedDate"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
          style="width: 200px; margin-bottom: 20px;"
      />
      <el-button @click="refreshChart" type="primary" style="margin-left: 10px;">查询</el-button>
    </div>
    <div id="main" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
// 引入 ECharts 核心模块，核心模块提供了 echarts 使用必须的接口。
import * as echarts from 'echarts';
// 假设您有一个API文件用于获取车票统计信息
import api from '@/api/ticketApi.js';

let myChart = null;
const selectedDate = ref('2025-08-15');

// 获取指定日期的车票剩余座位统计数据
const fetchTicketData = async (date) => {
  try {
    // 调用后端接口获取指定日期的车票数据
    console.log("请求日期:", date);
    const response = await api.getTicketStatisticsByDate(date);
    console.log("后端返回数据:", response);

    // 检查响应是否存在
    if (!response) {
      console.warn('API返回空数据');
      return [];
    }

    // 根据您提供的数据格式，response包含code、msg、data字段
    if (response && response.code === 200 && Array.isArray(response.data)) {
      console.log("使用response.data:", response.data);
      return response.data;
    }
    // 如果response本身就是数组（备用处理）
    else if (Array.isArray(response)) {
      console.log("直接使用response作为数组:", response);
      return response;
    }
    // 如果response.data是数组
    else if (response && response.data && Array.isArray(response.data)) {
      console.log("使用response.data:", response.data);
      return response.data;
    }
    // 如果没有有效数据，返回空数组
    else {
      console.warn('API返回的数据格式不符合预期');
      return [];
    }
  } catch (error) {
    console.error('获取车票数据失败:', error);
    // 出错时返回空数组
    return [];
  }
};

// 处理无数据情况，显示图片
const showNoDataImage = () => {
  const chartDom = document.getElementById('main');
  if (!chartDom) return;

  // 清空图表内容
  chartDom.innerHTML = `
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <img src="/src/img/11.jpg" alt="暂无数据" style="width: 200px; height: 200px;"/>
      <p style="color: #999; font-size: 16px; margin-top: 20px;">暂无数据</p>
    </div>
  `;
};

// 初始化图表
const initChart = async (date) => {
  console.log("初始化图表，日期:", date);

  const chartDom = document.getElementById('main');
  if (!chartDom) {
    console.error("找不到图表容器");
    return;
  }

  // 如果已有图表实例，先销毁
  if (myChart) {
    myChart.dispose();
  }

  // 清空之前的内容
  chartDom.innerHTML = '';

  myChart = echarts.init(chartDom);

  // 获取车票数据
  const ticketData = await fetchTicketData(date);
  console.log("处理后的ticketData:", ticketData);

  // 检查是否有数据
  if (!ticketData || ticketData.length === 0) {
    console.warn('没有可用的车票数据');
    // 显示无数据图片
    showNoDataImage();
    return;
  }

  // 处理数据格式
  const chartData = ticketData.map(item => ({
    value: item.remainSeats,
    name: `车次${item.id} (${item.remainSeats}座)`
  }));

  const option = {
    title: {
      text: `${date} 车票剩余座位统计`,
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}座 ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 'right',
      top: 'middle',
      bottom: 20,
      data: chartData.map(item => item.name)
    },
    series: [
      {
        name: '剩余座位',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['30%', '50%'], // 调整饼图位置，给左侧图例留出空间
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
            formatter: '{b}\n{c}座'
          }
        },
        labelLine: {
          show: false
        },
        data: chartData
      }
    ]
  };

  myChart.setOption(option);
};

// 日期改变处理
const handleDateChange = (date) => {
  console.log("日期改变:", date);
  if (date) {
    selectedDate.value = date;
    initChart(date);
  }
};

// 刷新图表
const refreshChart = () => {
  console.log("刷新图表，当前日期:", selectedDate.value);
  if (selectedDate.value) {
    initChart(selectedDate.value);
  }
};

// 窗口大小改变时重置图表大小
const handleResize = () => {
  if (myChart) {
    myChart.resize();
  }
};

onMounted(() => {
  // 默认加载2025-08-15的数据
  nextTick(() => {
    console.log("页面挂载完成，初始化默认图表");
    initChart(selectedDate.value);
  });
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.date-input-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>
